<template>
	<view>
		<view class="flexBox Title">
			<image style="width: 120rpx;" :src="storeData.store_label||'/static/images/108.png'" mode="widthFix"></image>
			<view class="Info">		
				<view class="Name">{{storeData.store_name}}</view>
				<view class="fans">粉丝数{{storeData.favorites_count}}</view>
			</view>
			<view class="follow" @click="changeLike(storeData.isStoreFavorites)"   v-if="storeData.isStoreFavorites == 0">关注</view>
			<view class="follow2" @click="changeLike(storeData.isStoreFavorites)"  v-if="storeData.isStoreFavorites == 1">已关注</view>
		</view>
		
		<view class="scoreInfo">
			<view class="">店铺好评率{{storeData.store_credit_percent}}.00%</view>
			<view class="flexBox2 ma10">
				<view class="">描述相符</view>
				<view class=""><view class="proportionIco"><text :style="{'width':125*storeData.store_credit.store_desccredit.credit/5+'px'}"></text></view></view>
				<view class="proportion">{{storeData.store_credit.store_desccredit.credit}}</view>
			</view>
			<view class="flexBox2 ma10">
				<view class="">服务态度</view>
				<view class=""><view class="proportionIco"><text :style="{'width':125*storeData.store_credit.store_servicecredit.credit/5+'px'}"></text></view></view>
				<view class="proportion">{{storeData.store_credit.store_servicecredit.credit}}</view>
			</view>
			<view class="flexBox2 ma10">
				<view class="">物流服务</view>
				<view class=""><view class="proportionIco"><text :style="{'width':125*storeData.store_credit.store_deliverycredit.credit/5+'px'}"></text></view></view>
				<view class="proportion">{{storeData.store_credit.store_deliverycredit.credit}}</view>
			</view>
		</view>
		
		<view class="BasicsInfo">
			<view class="title">基础信息</view>
			<view class="flexBox InfoList">
				<view class="f30">掌柜名</view>
				<view class="f30">{{storeData.seller_name}}</view>
			</view>
			<view class="flexBox InfoList">
				<view class="f30">服务电话</view>
				<view class="f30">{{storeData.store_phone}}</view>
			</view>
			<view class="flexBox InfoList">
				<view class="f30">开店时间</view>
				<view class="f30">{{storeData.store_date}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeData:""
			}
		},
		onLoad(e) {
			if(e.store_id){
				this.store_id=e.store_id;
			}
			this.getInfo();
		},
		methods: {
			getInfo(){
				this.$util.request({
					url:'/mobile/index.php?act=store&op=show',
					method: 'get',
					data: {
						"store_id":this.store_id,
					},
				}).then(res=>{			
						this.storeData=res.datas	
				})
			},
			changeLike(id){
				 if(id == 0){
					 this.$util.request({
					 	url:'/mobile/index.php?act=member_favorites&op=favorites_add',
					 	method: 'post',
					 	data: {
					 		"fav_type":"store",
							"fav_id":this.store_id
					 	},
					 }).then(res=>{			
					 		if(res.error_code==0){
								this.storeData.isStoreFavorites=!this.storeData.isStoreFavorites
							}else{
								uni.showToast({
									title:res.message,
									icon:"none"
								})
							}
					 })
				 }
				 if(id == 1){
				 	this.$util.request({
				 		url:'/mobile/index.php?act=member_favorites&op=favorites_del',
				 		method: 'post',
				 		data: {				 			
				 			"fav_id":this.store_id
				 		},
				 	}).then(res=>{			
				 			if(res.error_code==0){
				 				this.storeData.isStoreFavorites=!this.storeData.isStoreFavorites
				 			}else{
				 				uni.showToast({
				 					title:res.message,
				 					icon:"none"
				 				})
				 			}
				 	})				 
				 }
				 
				 
			},
		}
	}
</script>

<style>
	.InfoList{
		margin: 15rpx 0;
		color: #333333;
	}
	.f30{
		font-size: 30rpx;
	}
	.BasicsInfo .title{
		color: #999999;
	}
	.BasicsInfo{
		background-color: #FFFFFF;
		padding: 20rpx;
	}
	.ma10{
		margin: 20rpx 0;
	}
	.proportion{
		color: #ef0d86;
		font-weight: bold;
	}
	.proportionIco{
		width: 250rpx;
		margin: 10rpx 20rpx;
		background-color: #EEEEEE;
		height: 20rpx;
		border-radius: 10rpx;
		display: flex;
	}
	.proportionIco text{
		background:linear-gradient(to right,#ff4300,#f23a9f);
		display: inline-block;
		height: 20rpx;
		border-radius: 10rpx;
		width: 100%;
	}
	.scoreInfo{
		background-color: #FFFFFF;
		padding:10rpx 20rpx;
		border-bottom: 20rpx solid #F8F8F8;
	}
	.flexBox2{
		display: flex;
		align-items: center;
	}
	.flexBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.Title{
		padding: 20rpx;
		background-color: #FFFFFF;
		border: 1rpx solid #EEEEEE;
	}
	.Info{
		width:350rpx;
	}
	.Info .Name{
		font-weight: bold;
		color: #333333;
	}
	.Info .fans{
		color: #999;
	}
	.follow{
		background:linear-gradient(to right,#b80951,#f23a9f) ;
		/* padding: 0 30rpx; */
		width: 140rpx;
		text-align: center;
		border-radius: 40rpx;
		margin-right: 20rpx;
		color: #FFFFFF;
	}
	.follow2{
		/* padding: 0 30rpx; */
		width: 140rpx;
		text-align: center;
		border-radius: 40rpx;
		margin-right: 20rpx;
		color: #FFFFFF;
		background-color: #D2D2D2;
	}
</style>
